import React, {
  ForwardRefRenderFunction,
  useImperativeHandle,
  forwardRef,
  CSSProperties,
} from 'react';
import { Spin, Layout, Typography } from '@arco-design/web-react';
import { useMap } from './useMap';
import styles from './index.module.less';

const { Paragraph } = Typography;

export type ListItemProps = {
  name?: string;
  value?: string;
  [key: string]: string;
};

export interface MapRefProps {
  getCityData?: (
    proviceData: { value: string },
    callback: (data: Array<ListItemProps>) => void
  ) => void;
  getDistrictData?: (
    cityData: { value: string },
    callback: (data: Array<ListItemProps>) => void
  ) => void;
  getAddressData?: (districtData: { value: string }) => void;
}

export interface MapProps {
  style?: CSSProperties;
  initProviceData?: (data: Array<ListItemProps>) => void;
}

const Map: ForwardRefRenderFunction<MapRefProps, MapProps> = (props, ref) => {
  const { style = {}, initProviceData } = props;
  const { loading, getCityData, getDistrictData, getAddressData } = useMap({
    initProviceData,
  });

  useImperativeHandle(ref, () => ({
    getCityData: (
      params: { value: string },
      callback: (data: Array<ListItemProps>) => void
    ) => {
      getCityData(params, callback);
    },
    getDistrictData: (
      params: { value: string },
      callback: (data: Array<ListItemProps>) => void
    ) => {
      getDistrictData(params, callback);
    },
    getAddressData: (params: ListItemProps) => {
      getAddressData(params);
    },
  }));

  return (
    <Typography className={styles.page}>
      <Paragraph
        id="map-container"
        className={styles.container}
        style={style}
      ></Paragraph>
      {loading && (
        <Paragraph className={styles.loading}>
          <Spin tip="地图加载中" />
        </Paragraph>
      )}
    </Typography>
  );
};

export default forwardRef(Map);
